// Place all the styles related to the plans controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

// index styles

#plans-list{
  a:hover{
    color: #666;
    text-decoration: none;
  }
  .bs-callout{
    height: 100px;
    &:hover{
      background-color: #f9f9f9;
    }
  }

  .bs-callout-add {
    line-height: 125px;
    text-align: center;
    padding: 0px;
    border-left-width: 1px;
  }
  .bs-callout-add h4 {
    color: #777;
  }

  .bs-callout-add-icon{
    font-size: 50px;
    color: #bbbbbb;
  }

  #add-plan-entry{
    cursor: pointer;
  }

  #add-plan-field{
    background-color: #f9f9f9;
    border-left: 5px solid #777;
    height: 130px;
    padding: 10px;
    line-height: 50px;
    .color-select-feild{
      line-height: 30px;
      float: left;
    }
    .color-circle{
      cursor: pointer;
      padding-right: 10px;
      font-size: 21px;
    }
  }
  .add-plan-buttons{
    float: right;
    position: relative;
    top: -12px;
  }
}

#plan-page-header{
  margin: 0px;
  border: none;
  color: #333;
  padding: 12px 0;
  .plan_title{
    font-size: 20px;
    font-weight: bold;
  }
  .plan_description{
    font-size: 12px;
  }
  .plan-operations{
    display: inline;
    font-size: 14px;
    padding: 1px 10px;
    color: #a5a5a5;
    i {
      cursor: pointer;
    }
    .danger-opeartion{
      display: none;
    }
  }
  &:hover .danger-opeartion{
    display: inline;
  }
}

#plans-list {
  .modify-plan {
    position: absolute;
    top: 30px;
    right: 25px;
    cursor: pointer;
    padding: 5px;
    display: none;
  }
  .plan-item {
    &:hover .modify-plan {
      display: inline;
    }
  }
  .edit-plan {
    display: none;
    background-color: #f9f9f9;
    padding: 10px;
    .edit-plan-buttons {
      display: inline;
      float: right;
      a {
        cursor: pointer;
        &:hover {
          background-color: #f9f9f9;
        }
      }
      .cancel {
        color: #b9b9b9;
        margin-right: 10px;
        &:hover {
          color: #a7a7a7;
        }
      }
      .update {
        color: #49bcb5;
        &:hover {
          color: #44a8a1;
        }
      }
    }
    .mini-input {
      border: none;
      border-bottom: 1px solid #e8e8e8;
      border-radius: 0;
      padding: 0;
      height: 20px;
      box-shadow: none;
      background-color: #f9f9f9;
    }
    .color-select-feild {
      .selected-radio {
        & + label {
          padding: 7px;
          margin-bottom: 0;
          margin-right: 2px;
        }
      }
    }
  }
}

#plan-page-content{
  .col-md-3{

    /* min and max width for task list */
    min-width: 328px;
    max-width: 328px;

    /* scroll bar background and width */
    ::-webkit-scrollbar {
      width: 6px;
      background-color: #F5F5F5;
    }

    /* scroll box shadow radius and bg color */
    ::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(200, 200, 200, 0.3);
      border-radius: 10px;
      background-color: #fbfbfb;
    }

    /* scroll block shadow radius and bg color */
    ::-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 6px rgba(238, 238, 238, 0.3);
      background-color: #c8c8c8;
    }
  }
  // panel block
  $Font: #333;
  $NormalBorderColor: #eee;
  $panel-lists: (panel-gray: #777, panel-green: #5cb85c, panel-blue: #428bca, panel-red: #d9534f, panel-yellow: #f0ad4e, panel-qing: #5bc0de );
  @each $color-key, $Color in $panel-lists {
    .#{$color-key} {
      border-color: $NormalBorderColor;
      border-top-color: $Color;
      border-top-width: 5px;
    }
  }
  .panel-heading {
    color: $Font;
    font-weight: bold;
    background-color: #f8f8f8;
    border-color: #f8f8f8;
    .list-limit-operations{
      display: none;
    }
    &:hover .list-limit-operations{
      display: inline;
    }
  }
  .panel-heading .badge {
    color: #999;
    background-color: #ddd;
  }
  .panel-body {
    border-top-color: $NormalBorderColor;
    height: calc(100vh - 170px);
    overflow-x: hidden;
    white-space: nowrap;
    overflow-y: scroll;
  }
  .panel-footer {
    border-bottom-color: $NormalBorderColor;
  }

  a:hover{
    text-decoration: none;
    background-color: #777;
  }
  .plan-list-add {
    cursor: pointer;
    line-height: 40px;
    color: #888;
    text-align: center;
    background-color: #f1f1f1;
    border-radius: 5px;
    &:hover{
      background-color: #eaeaea;
      text-decoration: none;
    }
  }
  &> .row {
    overflow-x:scroll;
    overflow-y:hidden;
    white-space:nowrap;
  }
  &> .row [class*="col-lg"], &> .row [class*="col-md"], &> .row [class*="col-sm"] {
    float:none;
    display:inline-block;
    white-space:normal;
    vertical-align:top;
    padding-right: 0px;
  }
  #new-list-button{
    padding-right: 15px !important;
  }
  #new_list_area{
    padding-bottom: 20px;
    padding-right: 15px;
  }
  #new_list_field{
    height: 100px;
    border: 1px solid #eee;
    border-top: 5px solid #b6b6b6;
    border-radius: 3px;
    padding: 15px 12px;
    #new_list{
      .field:first-child{
        margin-bottom: 12px;
      }
    }
  }
  .add-list-buttons{
    float: right;
    position: relative;
    top: 10px;
  }
  .list-operations{
    float: right;
    color: #a5a5a5;
    .add-task-plus{
      color: #888888;
    }
    i {
      cursor: pointer;
      padding: 3px;
    }
  }
  .edit-list-area {
    display: none;
  }
  #edit_list {
    .edit-list-buttons {
      float: right;
      a {
        cursor: pointer;
        font-weight: normal;
        &:hover {
          background: none;
        }
      }
      .cancel {
        color: #b9b9b9;
        &:hover {
          color: #a7a7a7;
        }
      }
      .update {
        color: #49bcb5;
        &:hover {
          color: #44a8a1;
        }
      }
    }
    .selected-radio{
      & + label {
        padding: 8px;
      }
      &:checked + label:after {
        width: 22px;
        height: 22px;
        left: -3px;
        top: -3px;
      }
    }
  }
  .add-task-field, .update-task{
    display: none;
    height: 100px;
    box-shadow: 0 0 5px #bbb;
    padding: 10px;
    border-radius: 5px;
  }
  .add-task-field {
    margin: 0 10px 10px;
  }
  .update-task{
    margin-top: 10px;
  }
  #new_task, #edit_task {
    .enter-notice{
      line-height: 30px;
      color: #888;
      font-size: 12px;
      font-style: italic;
    }
    .add-task-buttons{
      float: right;
    }
  }
  .task-lists {
    padding: 10px 0;
    .empty-holder {
      padding: 0px 20px;
      &:after{
        content: "暂无相关任务"
      }
    }
    .task-field{
      line-height: 26px;
      font-size: 14px;
      position: relative;
      padding: 0px 20px;
      .task-operations, .confirm-delete{
        float: right;
        display: inline;
        position: absolute;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0px 0px 20px #fff;
        padding: 0px 10px;
        right: 5px;
        top: 0px;
      }
      .confirm-delete{
        display: none;
      }
      .btn-xs{
        font-size: 11px;
        line-height: 1.2;
        display: none;
      }
      .non-group{
        color: #a5a5a5;
        display: none;
        cursor: pointer;
      }
      &:hover .btn-xs{
        display: inline;
      }
      &:hover .non-group{
        display: inline;
      }
      @keyframes closed-task{
        0%   { width : 0; }
        100% { width: 100%; }
      }
      .closed-task{
        position: relative;
        font-style: italic;
        color: #888888;
      }
      .closed-task:after {
        content: ' ';
        position: absolute;
        top: 50%;
        left: 5px;
        width: 100%;
        height: 1px;
        background: #777777;
        animation-name: closed-task;
        animation-duration: 0.3s;
        animation-timing-function: linear;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
      }
      .update-task{
        display: none;
      }
    }
  }
}